<template>
  <div class="content">
    <div v-for="(item,index) in list" class="content-item">
      <img :src="item.image" alt="">
      <div>{{item.title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [
        {
          image: require('../../assets/img/music/content/songs.svg'),
          title: "乐库"
        },
        {
          image:require('../../assets/img/music/content/ranking.svg'),
          title:'排行榜'
        },{
          image:require('../../assets/img/music/content/singer.svg'),
          title:'歌手'
        }
      ]
    };
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  margin-top: 10px;
  display: flex;
  width: 100%;
  border-bottom: 2px solid #eee;
}
.content-item{
  
  text-align: center;
  flex: 1;
}
.content-item img{
  width: 30px;
  height: 30px;
}
</style>
